<template>
    <div id="addClaims">
        <h1>新增理赔</h1>
        <div>
            <label for="">申请理赔时间：</label>
            <el-date-picker
                v-model="addClaimsData.applyTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
            >
            </el-date-picker>
        </div>
        <div>
            <label for="">理赔处理时间：</label>
            <el-date-picker
                v-model="addClaimsData.handleTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
            >
            </el-date-picker>
        </div>
        <div>
            <label for="">所属订单：</label>
            <el-select
                v-model="addClaimsData.ordersId"
                placeholder="请选择"
                class="selectOrders"
            >
                <el-option
                    v-for="item in allOrders"
                    :key="item._id"
                    :value="item._id"
                    >{{ item._id }}</el-option
                >
            </el-select>
        </div>
        <div>
            <label for="">事故时间：</label>
            <el-date-picker
                v-model="addClaimsData.accidentTime"
                type="datetime"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
            >
            </el-date-picker>
        </div>
        <!-- 饿了么ui图片上传 -->
        <div>
            <label for="">相关图片：<br /></label>

            <el-upload
                action="http://localhost:3000/images/uploadImages"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handleSuccess"
            >
                <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
        </div>
        <button class="addBtn" @click="myAddClaims(addClaimsData)">
            确认添加
        </button>
    </div>
</template>

<script>
//引入辅助函数
import { createNamespacedHelpers } from "vuex";
let { mapState, mapMutations, mapActions } = createNamespacedHelpers("claims");
// 拿到 订单分仓 进行操作
const {
    mapState: orderMapState,
    mapActions: orderMapActions,
} = createNamespacedHelpers("orders");
export default {
    data() {
        return {
            dialogImageUrl: "",
            dialogVisible: false,
        };
    },
    //从计算属性中拿数据
    computed: {
        ...mapState(["addClaimsData"]),
        ...orderMapState(["allOrders"]),
    },
    watch: {
        //当监听到addClaimsData数据变化调用setClaimsData
        addClaimsData: {
            handler(newd) {
                this.setClaimsData(newd);
            },
            deep: true,
        },
    },
    mounted() {
        this.getAllOrders();
    },
    methods: {
        //获取仓库中修改新增理赔数据的方法
        ...mapMutations(["setClaimsData", "setClaimsDataNull"]),
        ...mapActions(["addClaims"]),
        ...orderMapActions(["getAllOrders"]),
        myAddClaims(data) {
            this.addClaims(data);
            //重置输入框
            this.setClaimsDataNull({});
            // this.$forceUpdate();
        },
        handleRemove(file, fileList) {
            console.log(file);
            console.log(file.name);
            this.addClaimsData.images.forEach((element, index) => {
                if (element.search(file.name) != -1) {
                    this.addClaimsData.images.splice(index, 1);
                }
            });
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleSuccess(response) {
            if (response.code) {
                this.addClaimsData.images.push(response.data);
            }
        },
    },
};
</script>

<style lang="scss" scoped>
#addClaims {
    text-align: left;
    h1 {
        margin: 10px 0px 0px 50px;
    }
    .el-input {
        position: relative;
        font-size: 14px;
        display: inline-block;
        width: 118%;
    }
    > div {
        margin: 15px 0px 0px 50px;
        .el-input[data-v-72ee8cf5] {
            width: 240px;
        }
    }
    .addBtn {
        margin: 15px 0px 0px 50px;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        background-color: #409eff;
    }
    #claimsImg {
        width: 300px;
        height: 300px;
        border: 1px dashed black;
    }
}
</style>